import { Button, Space, Table, Tag } from 'antd'
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import AddList from './addList'
import type { Product } from './types'
import { setSelectedProduct } from '../../redux/productSlice'
export default function ProductList(){
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const [allData, setAllData] = useState<Product[]>([
        {
            id: 1,
            name: '产品1',
            price: 100,
            description: '产品1描述',
            createTime: '2021-01-01',
            updateTime: '2021-01-01',
            status:'Success'
        },
        {
            id: 2,
            name: '产品2',
            price: 100,
            description: '产品2描述',
            createTime: '2022-01-01',
            updateTime: '2022-01-01',
            status:'Success'
        },
        {
            id: 3,
            name: '产品3',
            price: 100,
            description: '产品3描述',
            createTime: '2023-01-01',
            updateTime: '2023-01-01',
            status:'Success'
        },
        {
            id: 4,
            name: '产品4',
            price: 100,
            description: '产品4描述',
            createTime: '2023-01-01',
            updateTime: '2023-01-01',
            status:'Success'
        },
        {
            id: 5,
            name: '产品5',
            price: 100,
            description: '产品5描述',
            createTime: '2023-01-01',
            updateTime: '2023-01-01',
            status:'Success'
        },
        {
            id: 6,
            name: '产品6',
            price: 100,
            description: '产品6描述',
            createTime: '2023-01-01',
            updateTime: '2023-01-01',
            status:'Error'
        },
        {
            id: 7,
            name: '产品7',
            price: 100,
            description: '产品7描述',
            createTime: '2023-01-01',
            updateTime: '2023-01-01',
            status:'Pending'
        }
    ])
    const columns = [
        {
           title: 'ID',
           dataIndex: 'id',
           key: 'id'
        },
        {
           title: '产品名称',
           dataIndex: 'name',
           key: 'name'
        },
        {
           title: '价格',
           dataIndex: 'price',
           key: 'price'
        },
        {
           title: '描述',
           dataIndex: 'description',
           key: 'description'
        },
        {
           title: '创建时间',
           dataIndex: 'createTime',
           key: 'createTime'
        },
        {
           title: '更新时间',
           dataIndex: 'updateTime',
           key: 'updateTime'
        },
        {
           title: '状态',
           dataIndex: 'status',
           key: 'status',
           render: (text: string) => {
            return <Tag color={text === 'Success' ? 'green' : text === 'Error' ? 'red' : 'blue'}>{text}</Tag>
           }
        }
    ]

    const [selectKeys, setSelectKeys] = useState<React.Key[]>([])
    const [currentPage, setCurrentPage] = useState(1)
    const [pageSize, setPageSize] = useState(6)
    
    const handlSelectKeys = (keys:React.Key[])=>{
        setSelectKeys(keys)
        console.log(keys)
    }
    const [isShow, setShow] = useState(false)
   const handlAdd = ()=>{
    setShow(true)
   }
   const handlClose = ()=>{
    setShow(false)
   }
   const handleAddProduct = (newProduct: Product) => {
       console.log('添加新产品:', newProduct)
       setAllData(prev => [...prev, newProduct])
   }
   const handleChangePage = (page: number, size: number) => {
    console.log('page:', page, 'pageSize:', size)
    setCurrentPage(page)
    setPageSize(size)
   }
   
   // 计算当前页显示的数据
   const currentPageData = allData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
   
   // 处理行点击事件
   const handleRowClick = (record: Product) => {
     dispatch(setSelectedProduct(record))
     navigate('/productionDetail')
   }
    return(
        <>
            <Space>
                <Button onClick={handlAdd} type='primary' className='!mb-3'>
                    添加产品
                </Button>
            </Space>
          <Table 
            rowSelection={{
                type: 'checkbox',
                selectedRowKeys:selectKeys,
                onChange:handlSelectKeys
            }} 
            dataSource={currentPageData} 
            columns={columns}
            rowKey="id"
            pagination={{
                current: currentPage,
                pageSize: pageSize,
                total: allData.length,
                onChange: handleChangePage,
               }}
            onRow={(record) => ({
              onClick: () => handleRowClick(record),
              style: { cursor: 'pointer' }
            })}
          />
           <AddList isModalOpen={isShow} handlClose={handlClose} onAdd={handleAddProduct}  />
        </>
    )
}